<template>
  <div class="about-page">
    
    <div class="container">
      <!-- 公司介绍 -->
      <el-card class="about-section">
        <div class="company-intro">
          <div class="intro-content">
            <h1>关于瓜子二手车</h1>
            <p class="slogan">二手车直卖网，没有中间商赚差价</p>
            <div class="intro-text">
              <p>
                瓜子二手车成立于2014年，是中国领先的二手车交易服务平台。我们致力于通过技术创新，
                为消费者提供更透明、更便捷、更可靠的二手车交易服务。
              </p>
              <p>
                瓜子二手车直卖网首创了二手车直卖模式，通过线上平台直接连接个人买家和个人卖家，
                省去了传统二手车交易中的中间环节，让买卖双方都能获得更好的交易体验。
              </p>
            </div>
          </div>
          <div class="intro-image">
            <img src="/images/about-company.jpg" alt="瓜子二手车">
          </div>
        </div>
      </el-card>

      <!-- 服务优势 -->
      <el-card class="advantages-section">
        <template #header>
          <h2>我们的优势</h2>
        </template>
        <div class="advantages-grid">
          <div class="advantage-item">
            <el-icon size="48" color="#ff6a00"><Lock /></el-icon>
            <h3>专业检测</h3>
            <p>259项专业检测，确保车况真实透明</p>
          </div>
          <div class="advantage-item">
            <el-icon size="48" color="#ff6a00"><TrendCharts /></el-icon>
            <h3>价格透明</h3>
            <p>直卖模式，没有中间商赚差价</p>
          </div>
          <div class="advantage-item">
            <el-icon size="48" color="#ff6a00"><Medal /></el-icon>
            <h3>质保服务</h3>
            <p>1年2万公里官方质保，购车无忧</p>
          </div>
          <div class="advantage-item">
            <el-icon size="48" color="#ff6a00"><InfoFilled /></el-icon>
            <h3>全程服务</h3>
            <p>专业顾问全程服务，手续办理更便捷</p>
          </div>
        </div>
      </el-card>

      <!-- 服务流程 -->
      <el-card class="process-section">
        <template #header>
          <h2>服务流程</h2>
        </template>
        <div class="process-steps">
          <el-steps :active="4" align-center>
            <el-step title="在线选车" description="海量真实车源，专业检测报告" />
            <el-step title="预约看车" description="免费预约，专业顾问陪同" />
            <el-step title="交易过户" description="一站式服务，手续便捷" />
            <el-step title="售后保障" description="官方质保，全程无忧" />
          </el-steps>
        </div>
      </el-card>

      <!-- 团队介绍 -->
      <el-card class="team-section">
        <template #header>
          <h2>核心团队</h2>
        </template>
        <div class="team-grid">
          <div class="team-member">
            <div class="member-avatar">
              <img src="/images/team-1.jpg" alt="团队成员">
            </div>
            <h3>张经理</h3>
            <p class="position">检测专家</p>
            <p class="desc">10年汽车检测经验，专业认证评估师</p>
          </div>
          <div class="team-member">
            <div class="member-avatar">
              <img src="/images/team-2.jpg" alt="团队成员">
            </div>
            <h3>李顾问</h3>
            <p class="position">交易顾问</p>
            <p class="desc">8年二手车交易经验，服务超千名客户</p>
          </div>
          <div class="team-member">
            <div class="member-avatar">
              <img src="/images/team-3.jpg" alt="团队成员">
            </div>
            <h3>王工程师</h3>
            <p class="position">技术专家</p>
            <p class="desc">资深汽车工程师，专业技术支持</p>
          </div>
        </div>
      </el-card>

      <!-- 联系我们 -->
      <el-card class="contact-section">
        <template #header>
          <h2>联系我们</h2>
        </template>
        <div class="contact-content">
          <div class="contact-info">
            <div class="contact-item">
              <el-icon><Phone /></el-icon>
              <div class="contact-details">
                <h4>客服热线</h4>
                <p>400-123-4567</p>
                <p class="time">服务时间：9:00-21:00</p>
              </div>
            </div>
            <div class="contact-item">
              <el-icon><Message /></el-icon>
              <div class="contact-details">
                <h4>邮箱地址</h4>
                <p>service@guazi.com</p>
                <p class="time">24小时内回复</p>
              </div>
            </div>
            <div class="contact-item">
              <el-icon><Location /></el-icon>
              <div class="contact-details">
                <h4>公司地址</h4>
                <p>北京市朝阳区瓜子大厦</p>
                <p class="time">欢迎莅临参观</p>
              </div>
            </div>
          </div>
          <div class="contact-map">
            <!-- 这里可以放置地图组件 -->
            <div class="map-placeholder">
              <el-icon><MapLocation /></el-icon>
              <p>公司位置地图</p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { 
  Lock, 
  TrendCharts, 
  Medal, 
  InfoFilled, 
  Phone, 
  Message, 
  Location, 
  MapLocation 
} from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
.about-page {
  padding: 20px 0;

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

.about-section,
.advantages-section,
.process-section,
.team-section,
.contact-section {
  margin-bottom: 30px;
}

.company-intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: center;

  .intro-content {
    h1 {
      margin: 0 0 12px;
      font-size: 32px;
      color: #333;
    }

    .slogan {
      margin: 0 0 24px;
      font-size: 18px;
      color: #ff6a00;
      font-weight: 500;
    }

    .intro-text {
      p {
        margin: 0 0 16px;
        line-height: 1.8;
        color: #666;
        font-size: 16px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .intro-image {
    img {
      width: 100%;
      border-radius: 8px;
    }
  }
}

.advantages-section,
.team-section,
.contact-section {
  :deep(.el-card__header) {
    border-bottom: 1px solid #f0f0f0;
    padding: 20px;

    h2 {
      margin: 0;
      font-size: 24px;
      color: #333;
    }
  }
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 20px;

  .advantage-item {
    text-align: center;
    padding: 30px 20px;

    h3 {
      margin: 16px 0 12px;
      font-size: 18px;
      color: #333;
    }

    p {
      margin: 0;
      color: #666;
      line-height: 1.6;
    }
  }
}

.process-section {
  :deep(.el-card__body) {
    padding: 40px 20px;
  }
}

.process-steps {
  :deep(.el-step) {
    .el-step__head {
      .el-step__icon {
        background-color: #ff6a00;
        border-color: #ff6a00;
        
        .el-step__icon-inner {
          color: white;
        }
      }
    }

    .el-step__title {
      font-size: 16px;
      color: #333;
    }

    .el-step__description {
      color: #666;
    }
  }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 20px;

  .team-member {
    text-align: center;
    padding: 20px;

    .member-avatar {
      width: 120px;
      height: 120px;
      margin: 0 auto 20px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    h3 {
      margin: 0 0 8px;
      font-size: 18px;
      color: #333;
    }

    .position {
      margin: 0 0 12px;
      color: #ff6a00;
      font-weight: 500;
    }

    .desc {
      margin: 0;
      color: #666;
      line-height: 1.6;
    }
  }
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 20px;
}

.contact-info {
  .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;

    &:last-child {
      margin-bottom: 0;
    }

    .el-icon {
      font-size: 24px;
      color: #ff6a00;
      margin-top: 4px;
    }

    .contact-details {
      h4 {
        margin: 0 0 8px;
        font-size: 16px;
        color: #333;
      }

      p {
        margin: 0 0 4px;
        color: #666;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.contact-map {
  .map-placeholder {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
    color: #999;

    .el-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    p {
      margin: 0;
    }
  }
}

@media (max-width: 768px) {
  .company-intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .advantages-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .contact-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .process-steps {
    :deep(.el-steps) {
      .el-step {
        .el-step__main {
          .el-step__title {
            font-size: 14px;
          }

          .el-step__description {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>